<template>
<div>
  <Breadcrumb :items="['营销管理', '轮播管理']" icon="icon-command"/>
  <a-card class="general-card" title="轮播管理">
    <template #extra>
      <a-space direction="horizontal" :size="18">
        <a-button type="primary" :loading="loading" @click="refresh">
          <template #icon>
            <icon-refresh />
          </template>
          刷新
        </a-button>
      </a-space>
    </template>

    <!--分割线-->
    <a-divider direction="horizontal" />
    <a-row style="margin-bottom: 16px">
      <a-col :span="16">
        <a-space>
          <a-button type="primary" @click="openModal(null, '添加', false)">
            <template #icon>
              <icon-plus />
            </template>
            添加
          </a-button>
        </a-space>
      </a-col>
      <a-col :span="8" style="text-align: right">
        <a-space>
          <table-column-setting v-model:columns="columns" />
        </a-space>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :data="tableData"
      :loading="loading"
      row-key="id"
      :pagination="false">
      <template #number="{ record, rowIndex }">
        {{ rowIndex + 1 }}
      </template>
      <template #enabled="{ record }">
        <a-switch
          v-model="record.enabled"
          type="round"
          unchecked-color="#F53F3F"
          :checked-value="true"
          :unchecked-value="false"
          :disabled="true">
          <template #checked>
            启用
          </template>
          <template #unchecked>
            禁用
          </template>
        </a-switch>
      </template>
      <template #operation="{ record }">
        <a-space>
          <a-button type="text" size="small" @click="openDrawer(record.id, record.title)">
            <template #icon>
              <icon-settings />
            </template>
            <template #default>轮播图管理</template>
          </a-button>
          <a-button type="text" size="small" @click="openModal(record.id, '预览', true)">
            预览
          </a-button>
          <a-button type="text" size="small" @click="openModal(record.id, '修改', false)">
            修改
          </a-button>
          <a-popconfirm :content="'确定删除 ' + record.title + ' 吗?'" type="warning" @ok="doRemove(record.id)">
            <a-button type="text" size="small" status="danger">
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </a-card>

  <carousel-board ref="modal" @ok="refresh"/>
  <carousel-setting ref="drawer"/>
</div>
</template>

<script>
import { defineComponent, ref } from "vue";
import useLoading from "@/hooks/loading";
import {list, removeById} from "@/api/modules/marketing/carousel";
import CarouselBoard from "@/views/marketing/carousel/components/carousel-board.vue";
import CarouselSetting from "@/views/marketing/carousel/components/carousel-setting.vue";

const { loading, setLoading } = useLoading();
const columns = ref([{
  title: '#',
  align: 'right',
  fixed: 'left',
  width: 50,
  slotName: 'number'
}, {
  title: "标题",
  dataIndex: "title",
}, {
  title: '编码',
  dataIndex: 'code',
}, {
  title: '切换间隔(ms)',
  dataIndex: 'interval',
  align: "right",
}, {
  title: '动画时长(ms)',
  dataIndex: 'duration',
  align: "right",
}, {
  title: '启用',
  dataIndex: 'enabled',
  slotName: 'enabled'
}, {
  title: '创建人',
  dataIndex: 'createBy',
  hidden: true
}, {
  title: "操作",
  align: "right",
  fixed: "right",
  dataIndex: 'operation',
  slotName: 'operation'
}])
const tableData = ref([]);

export default defineComponent({
  name: 'Carousel',
  components: {CarouselSetting, CarouselBoard},
  data() {
    return {
      loading,
      columns,
      tableData
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    async refresh() {
      try {
        setLoading(true)
        const { data } = await list()
        tableData.value = data
      } finally {
        setLoading(false)
      }
    },
    openDrawer(id, title) {
      this.$refs.drawer.open(id, title)
    },
    openModal(id, title, disabled) {
      this.$refs.modal.open(id, title, disabled)
    },
    async doRemove(id) {
      try {
        setLoading(true)
        await removeById(id)
        await this.refresh()
      } finally {
        setLoading(false)
      }
    }
  }
})






</script>

<style scoped>

</style>
